<template>
  <div class="app-container">
    <el-form
      ref="form"
      :inline="true"
      :model="form"
      :rules="rules"
      size="small"
      label-width="80px"
      hide-required-asterisk
    >
      <el-row :gutter="15">
        <el-col :span="12">
          <el-card class="box-card" shadow="never">
            <div class="head-container">
              <div class="table_title">基本信息</div>
            </div>
            <el-form-item label="姓名">
              <div class="item_content">{{ currentPatient.patientName }}</div>
            </el-form-item>
            <el-form-item label="住院号/门诊号" label-width="100px">
              <div class="item_content">
                {{
                  currentPatient.patientType === 1
                    ? currentPatient.outpatientNum
                    : currentPatient.patientType === 2
                    ? currentPatient.admissionNum
                    : currentPatient.outpatientNum ||
                      currentPatient.admissionNum
                }}
              </div>
            </el-form-item>
            <el-form-item label="性别">
              <div class="item_content">{{ currentPatient.genderName }}</div>
            </el-form-item>
            <el-form-item label="年龄">
              <div class="item_content">{{ currentPatient.age }}</div>
            </el-form-item>
            <el-form-item label="住址">
              <div class="item_content">{{ currentPatient.addr }}</div>
            </el-form-item>
            <el-form-item label="电话">
              <div class="item_content">{{ currentPatient.phoneNum }}</div>
            </el-form-item>
            <el-form-item label="门诊">
              <el-radio-group :value="currentPatient.patientType">
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="床号">
              <div class="item_content">{{ currentPatient.bedNum }}</div>
            </el-form-item>
            <el-form-item label="主要诊断">
              <div class="item_content">{{ currentPatient.coreDiagnosis }}</div>
            </el-form-item>
            <el-form-item label="操舱注意事项" label-width="100px">
              <div class="item_content">
                {{
                  currentPatient.adviceHyperbaricOxygen &&
                  currentPatient.adviceHyperbaricOxygen.adviceNote
                }}
              </div>
            </el-form-item>
          </el-card>
          <el-card class="box-card" shadow="never">
            <div class="head-container">
              <div class="table_title">操舱医嘱</div>
            </div>
            <el-form-item label="1、表压">
              <el-input
                v-model="adviceHyperbaricOxygen.gaugePressure"
                placeholder="请输入"
                clearable
                disabled
              >
                <template slot="append">Mpa</template>
              </el-input>
            </el-form-item>
            <el-form-item label="2、方案">
              <el-form-item label="单次吸氧" label-width="100px">
                <el-input
                  v-model="adviceHyperbaricOxygen.singleOxygenMinute"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                  disabled
                >
                  <template slot="append">分钟</template>
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="adviceHyperbaricOxygen.singleOxygenNum"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                  disabled
                >
                  <template slot="append">次</template>
                </el-input>
              </el-form-item>
            </el-form-item>
            <el-form-item label=" ">
              <el-form-item label="间隔吸空气" label-width="100px">
                <el-input
                  v-model="adviceHyperbaricOxygen.intervalOxygenMinute"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                  disabled
                >
                  <template slot="append">分钟</template>
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="adviceHyperbaricOxygen.intervalOxygenNum"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                  disabled
                >
                  <template slot="append">次</template>
                </el-input>
              </el-form-item>
            </el-form-item>
            <el-form-item label="3、疗程">
              <el-form-item label-width="100px">
                <el-input
                  v-model="adviceHyperbaricOxygen.exePeriod"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                  disabled
                >
                  <template slot="append">次/日</template>
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="currentPatient.periodNum"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                  disabled
                >
                  <template slot="append">日</template>
                </el-input>
              </el-form-item>
            </el-form-item>
            <el-form-item label="医生签名">
              <div class="item_content">
                {{ adviceHyperbaricOxygen.doctorSign }}
              </div>
            </el-form-item>
            <el-form-item label="申请时间">
              <div class="item_content">
                {{
                  adviceHyperbaricOxygen.createTime &&
                  moment(adviceHyperbaricOxygen.createTime).format(
                    "YYYY-MM-DD HH:mm:ss"
                  )
                }}
              </div>
            </el-form-item>
            <el-form-item label="疗效">
              <el-radio-group v-model="adviceHyperbaricOxygen.curativeEffect">
                <el-radio
                  v-for="item in CURATIVE_EFFECT_LIST"
                  :key="item.value"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="中断治疗原因" label-width="120px">
              <el-radio-group
                v-model="adviceHyperbaricOxygen.treatmentInterruptionReason"
              >
                <el-radio
                  v-for="item in INTERRUPT_REASON_LIST"
                  :key="item.value"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="液压氧治疗过程中病情简要"
              prop="note"
              class="text_area_item"
              label-width="200px"
            >
              <el-input
                v-model="adviceHyperbaricOxygen.briefCondition"
                :autosize="{ minRows: 1 }"
                type="textarea"
                disabled
              />
            </el-form-item>
          </el-card>
          <el-card class="box-card" shadow="never">
            <div class="head-container">
              <div class="table_title">备注信息</div>
            </div>
            <el-form-item
              prop="note"
              class="text_area_item"
              label-width="100px"
            >
              <div slot="label">
                <div>上次备注</div>
                <div>操舱注意事项</div>
              </div>
              <div class="item_content">
                {{ adviceHyperbaricOxygen.preAdviceNote }}
              </div>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" shadow="never">
            <div class="head-container">
              <div class="table_title">入舱前评估</div>
            </div>
            <el-form-item label="治疗日期" prop="treatmentTime">
              <el-date-picker
                v-model="form.treatmentTime"
                type="date"
                placeholder="请选择"
                class="num_input"
                value-format="timestamp"
              />
            </el-form-item>
            <el-form-item label="次数" prop="treatmentNum">
              <el-input-number
                v-model="form.treatmentNum"
                placeholder="请输入"
                clearable
                class="num_input"
                :min="1"
              />
            </el-form-item>
            <el-form-item label="疼痛" prop="pain">
              <el-input
                v-model="form.pain"
                placeholder="请输入"
                clearable
                class="num_input"
              />
            </el-form-item>
            <el-form-item label="跌倒" prop="fallRisk">
              <el-radio-group v-model="form.fallRisk">
                <el-radio
                  v-for="item in GUTSER_LEVEL_LIST"
                  :key="item.value"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="不适主诉"
              prop="discomfort"
              class="text_area_item"
            >
              <el-input
                v-model="form.discomfort"
                :autosize="{ minRows: 1 }"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="心理评估" prop="psychology">
              <el-radio-group v-model="form.psychology">
                <el-radio
                  v-for="item in PSYCHOLOGY_LEVEL_LIST"
                  :key="item.value"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="生命体征">
              <el-form-item
                label="T（℃）"
                prop="preTemperature"
                label-width="120px"
              >
                <el-input-number
                  :controls="false"
                  v-model="form.preTemperature"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                />
              </el-form-item>
              <el-form-item
                label="P（次/分）"
                prop="prePulse"
                label-width="120px"
              >
                <el-input-number
                  :controls="false"
                  v-model="form.prePulse"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                />
              </el-form-item>
              <el-form-item
                label="R（次/分）"
                prop="preBreathing"
                label-width="120px"
              >
                <el-input-number
                  :controls="false"
                  v-model="form.preBreathing"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                />
              </el-form-item>
              <el-input-number
                :controls="false"
                label="BP（mmHg）"
                prop="preBloodPressure"
                label-width="120px"
              >
                <el-input
                  v-model="form.preBloodPressure"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                />
              </el-input-number>
            </el-form-item>
          </el-card>
          <el-card class="box-card" shadow="never">
            <div class="head-container">
              <div class="table_title">操舱参数</div>
            </div>
            <el-form-item label="加压起止时间（分钟）" label-width="160px">
              <el-form-item
                label="起"
                prop="compressionTimeBegin"
                label-width="20px"
              >
                <el-time-picker
                  v-model="form.compressionTimeBegin"
                  class="num_input"
                  placeholder="起始时间"
                  format="HH:mm"
                  value-format="timestamp"
                  @change="compressionTimeChange(true)"
                />
              </el-form-item>
              <el-form-item
                label="止"
                prop="compressionTimeEnd"
                label-width="20px"
              >
                <el-time-picker
                  v-model="form.compressionTimeEnd"
                  class="num_input"
                  placeholder="终止时间"
                  format="HH:mm"
                  value-format="timestamp"
                  @change="compressionTimeChange(false)"
                />
              </el-form-item>
            </el-form-item>
            <el-form-item label="稳压阶段" label-width="160px">
              <el-form-item
                label="吸氧"
                prop="singleOxygenMinute"
                label-width="60px"
              >
                <el-input
                  v-model="form.singleOxygenMinute"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                >
                  <template slot="append">分钟</template>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="singleOxygenNum">
                <el-input
                  v-model="form.singleOxygenNum"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                >
                  <template slot="append">次</template>
                </el-input>
              </el-form-item>
            </el-form-item>
            <el-form-item label=" " label-width="160px">
              <el-form-item
                label="吸空气"
                prop="intervalOxygenMinute"
                label-width="60px"
              >
                <el-input
                  v-model="form.intervalOxygenMinute"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                >
                  <template slot="append">分钟</template>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="intervalOxygenNum">
                <el-input
                  v-model="form.intervalOxygenNum"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                >
                  <template slot="append">次</template>
                </el-input>
              </el-form-item>
            </el-form-item>
            <el-form-item label=" " label-width="160px">
              <el-form-item
                label="表压"
                prop="gaugePressure"
                label-width="60px"
              >
                <el-input
                  v-model="form.gaugePressure"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                >
                  <template slot="append">Mpa</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label="氧浓度"
                prop="oxygenConcentration"
                label-width="60px"
              >
                <el-input
                  v-model="form.oxygenConcentration"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-form-item>
            <el-form-item label=" " label-width="160px">
              <el-form-item
                label="舱温"
                prop="cabinTemperature"
                label-width="60px"
              >
                <el-input
                  v-model="form.cabinTemperature"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                >
                  <template slot="append">℃</template>
                </el-input>
              </el-form-item>
            </el-form-item>
            <el-form-item label="减压起止时间（分钟）" label-width="160px">
              <el-form-item
                label="起"
                prop="decompressionTimeBegin"
                label-width="20px"
              >
                <el-time-picker
                  v-model="form.decompressionTimeBegin"
                  class="num_input"
                  placeholder="起始时间"
                  format="HH:mm"
                  value-format="timestamp"
                  @change="decompressionTimeChange(true)"
                />
              </el-form-item>
              <el-form-item
                label="止"
                prop="decompressionTimeEnd"
                label-width="20px"
              >
                <el-time-picker
                  v-model="form.decompressionTimeEnd"
                  class="num_input"
                  placeholder="终止时间"
                  format="HH:mm"
                  value-format="timestamp"
                  @change="decompressionTimeChange(false)"
                />
              </el-form-item>
            </el-form-item>
          </el-card>
          <el-card class="box-card" shadow="never">
            <div class="head-container">
              <div class="table_title">出舱后评估</div>
            </div>
            <el-form-item label="生命体征">
              <el-form-item
                label="T（℃）"
                prop="afTemperature"
                label-width="120px"
              >
                <el-input-number
                  :controls="false"
                  v-model="form.afTemperature"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                />
              </el-form-item>
              <el-form-item
                label="P（次/分）"
                prop="afPulse"
                label-width="120px"
              >
                <el-input-number
                  :controls="false"
                  v-model="form.afPulse"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                />
              </el-form-item>
              <el-form-item
                label="R（次/分）"
                prop="afBreathing"
                label-width="120px"
              >
                <el-input-number
                  :controls="false"
                  v-model="form.afBreathing"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                />
              </el-form-item>
              <el-form-item
                label="BP（mmHg）"
                prop="afBloodPressure"
                label-width="120px"
              >
                <el-input-number
                  :controls="false"
                  v-model="form.afBloodPressure"
                  placeholder="请输入"
                  clearable
                  class="num_input"
                />
              </el-form-item>
            </el-form-item>
            <el-form-item
              label="下次操舱注意事项"
              prop="nextAdviceNote"
              class="text_area_item"
              label-width="130px"
            >
              <el-input
                v-model="form.nextAdviceNote"
                :autosize="{ minRows: 1 }"
                type="textarea"
              />
            </el-form-item>
            <el-form-item
              label="入舱前后安检、宣教是否执行"
              prop="propagandaStates"
              label-width="200px"
            >
              <el-radio-group v-model="form.propagandaStates">
                <el-radio
                  v-for="item in CONFIRM_STATUS_LIST"
                  :key="item.value"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <br />
            <el-form-item label="操舱签名" prop="exeSign" label-width="130px">
              <el-input
                v-model="form.exeSign"
                placeholder="请输入"
                clearable
                class="num_input"
              />
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="text-align: center; padding-top: 20px">
        <el-button @click.stop="goBack" :loading="submitLoading">
          取消
        </el-button>
        <el-button type="primary" @click.stop="submit" :loading="submitLoading">
          保存
        </el-button>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {
  CURATIVE_EFFECT_LIST,
  INTERRUPT_REASON_LIST,
  GUTSER_LEVEL_LIST,
  PSYCHOLOGY_LEVEL_LIST,
  CONFIRM_STATUS_LIST,
} from "./enums";
import Cookies from "js-cookie";
import { GENDET_LIST, getLabel } from "./enums";
import moment from "moment";
import { therapistsOxygenSave } from "@/api/therapistsSite/therapistsSite";
const defaultForm = {
  treatmentTime: moment().valueOf(),
  treatmentNum: undefined,
  pain: "",
  fallRisk: 2,
  discomfort: "",
  psychology: 1,
  preTemperature: undefined,
  prePulse: undefined,
  preBreathing: undefined,
  preBloodPressure: undefined,
  compressionTimeBegin: moment().valueOf(),
  compressionTimeEnd: moment().valueOf(),
  singleOxygenMinute: "",
  singleOxygenNum: "",
  intervalOxygenMinute: "",
  intervalOxygenNum: "",
  gaugePressure: "",
  oxygenConcentration: "",
  cabinTemperature: "",
  decompressionTimeBegin: moment().valueOf(),
  decompressionTimeEnd: moment().valueOf(),
  afTemperature: undefined,
  afPulse: undefined,
  afBreathing: undefined,
  afBloodPressure: undefined,
  nextAdviceNote: "",
  propagandaStates: 1,
  exeSign: "",
};
export default {
  name: "HighPressureOxygenRecord",
  computed: {
    currentPatient() {
      try {
        const info = JSON.parse(Cookies.get("currentPatient"));
        return info
          ? {
              ...info,
              genderName: getLabel(info.gender, GENDET_LIST),
            }
          : {};
      } catch (res) {
        return {};
      }
    },
    adviceHyperbaricOxygen() {
      return this.currentPatient.adviceHyperbaricOxygen || {};
    },
  },
  data() {
    return {
      form: Object.assign({}, defaultForm),
      rules: {
        treatmentTime: {
          required: true,
          message: "请选择治疗日期",
          trigger: "change",
        },
        treatmentNum: {
          required: true,
          message: "请输入次数",
          trigger: "blur",
        },
        pain: { required: true, message: "请输入疼痛描述", trigger: "blur" },
        fallRisk: {
          required: true,
          message: "请选择跌倒风险",
          trigger: "blur",
        },
        discomfort: {
          required: true,
          message: "请输入不适主诉",
          trigger: "blur",
        },
        psychology: {
          required: true,
          message: "请选择心理评估",
          trigger: "blur",
        },
        preTemperature: {
          required: true,
          message: "请输入入舱前体温",
          trigger: "blur",
        },
        prePulse: {
          required: true,
          message: "请输入入舱前脉搏",
          trigger: "blur",
        },
        preBreathing: {
          required: true,
          message: "请输入入舱前呼吸",
          trigger: "blur",
        },
        preBloodPressure: {
          required: true,
          message: "请输入入舱前血压",
          trigger: "blur",
        },
        compressionTimeBegin: {
          required: true,
          message: "请选择加压起始时间",
          trigger: "change",
        },
        compressionTimeEnd: {
          required: true,
          message: "请选择加压终止时间",
          trigger: "change",
        },
        singleOxygenMinute: {
          required: true,
          message: "请输入吸氧分钟数",
          trigger: "blur",
        },
        singleOxygenNum: {
          required: true,
          message: "请输入吸氧分次数",
          trigger: "blur",
        },
        intervalOxygenMinute: {
          required: true,
          message: "请输入间隔吸氧分钟数",
          trigger: "blur",
        },
        intervalOxygenNum: {
          required: true,
          message: "请输入间隔吸氧次数",
          trigger: "blur",
        },
        gaugePressure: {
          required: true,
          message: "请输入表压",
          trigger: "blur",
        },
        oxygenConcentration: {
          required: true,
          message: "请输入氧浓度",
          trigger: "blur",
        },
        cabinTemperature: {
          required: true,
          message: "请输入舱温 ",
          trigger: "blur",
        },
        decompressionTimeBegin: {
          required: true,
          message: "请选择减压起始时间",
          trigger: "change",
        },
        decompressionTimeEnd: {
          required: true,
          message: "请选择减压终止时间",
          trigger: "change",
        },
        afTemperature: {
          required: true,
          message: "请输入出舱后体温",
          trigger: "blur",
        },
        afPulse: {
          required: true,
          message: "请输入出舱后脉搏",
          trigger: "blur",
        },
        afBreathing: {
          required: true,
          message: "请输入出舱后呼吸",
          trigger: "blur",
        },
        afBloodPressure: {
          required: true,
          message: "请输入出舱后血压",
          trigger: "blur",
        },
        nextAdviceNote: {
          required: true,
          message: "请输入下次操舱注意事项",
          trigger: "blur",
        },
        propagandaStates: {
          required: true,
          message: "请选择安检、宣教是否执行",
          trigger: "blur",
        },
        exeSign: { required: true, message: "请输入操舱签名", trigger: "blur" },
      },
      CURATIVE_EFFECT_LIST,
      INTERRUPT_REASON_LIST,
      GUTSER_LEVEL_LIST,
      PSYCHOLOGY_LEVEL_LIST,
      CONFIRM_STATUS_LIST,
      submitLoading: false,
    };
  },
  created() {
    const userInfo = this.$store.state.user.user;
    this.form.exeSign = userInfo.realname;
  },
  methods: {
    moment,
    goBack() {
      this.$router.back();
    },
    compressionTimeChange(start) {
      const { compressionTimeBegin, compressionTimeEnd } = this.form;
      if (compressionTimeBegin > compressionTimeEnd) {
        if (start) this.form.compressionTimeEnd = compressionTimeBegin;
        else this.form.compressionTimeBegin = compressionTimeEnd;
      }
    },
    decompressionTimeChange(start) {
      const { decompressionTimeBegin, decompressionTimeEnd } = this.form;
      if (decompressionTimeBegin > decompressionTimeEnd) {
        if (start) this.form.decompressionTimeEnd = decompressionTimeBegin;
        else this.form.decompressionTimeBegin = decompressionTimeEnd;
      }
    },
    getFormData() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve({
              ...this.form,
            });
          } else {
            reject("存在未通过表单校验的数据");
            return false;
          }
        });
      });
    },
    submit() {
      this.getFormData().then((data) => {
        this.submitLoading = true;
        therapistsOxygenSave({
          ...data,
          reservationId: this.currentPatient.reservationId,
        })
          .then(() => {
            this.$notify({
              title: "保存成功",
              type: "success",
              duration: 1500,
            });
            this.goBack();
          })
          .finally(() => {
            this.submitLoading = false;
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.crud-opts {
  display: inline-flex;
}

.table_title {
  display: inline-block;
  line-height: 30px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}

.item_content {
  min-width: 100px;
}

.head-container {
  line-height: 30.5px;
  padding-bottom: 0;

  /deep/.filter-item {
    margin-bottom: 0;
  }
}

.num_input {
  width: 160px;
}

.text_area_item {
  width: 100%;

  /deep/.el-form-item__content {
    width: calc(100% - 200px);
  }
}
</style>
